var token = localStorage.getItem('mytoken');



function getPage(page, pageSize) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson${page}`,
        type: 'get',
        headers: {
            token
        },
        data: {
            page,
            pageSize
        },
        success: (res) => {
            console.log(res);
        }
    })
}

function getPer(page, pageSize) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson?page=${page}&pageSize=${pageSize}`,
        type: "GET",
        headers: {
            token
            // : localStorage.getItem('mytoken')
        },
        success: function(res) {
            console.log(res);
            const _content = document.querySelector('.card');
            const showContent = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>人物名</th>
            
                <th>人物称号</th>
                <th>人物简介</th>
               
                <th>人物图</th>
               
                <th>操作</th>`
                res.data.forEach((item) => {
                    // const time = getLocalTime(item.reg_time)
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);


                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td>${item.uname}</td>
                     
                        <td>${item.title}</td>
                        <td  class='biao'>${item.introduce}</td>
                        <td><img class='hear' src='http://192.168.3.184:7001/${item.portrait}' /></td>
                 
                        <td>
                        <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                        <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                       
                        </td>`
                    _content.appendChild(tr)

                })
            }
            showContent()

            //创建分页
            const pagel = document.querySelector('.page');
            console.log(pagel);
            const page = () => {
                // console.log(res.num);
                const pageCount = Math.ceil(res.num / pageSize);
                for (let i = 1; i <= pageCount; i++) {
                    const li = document.createElement('li');
                    li.id = `${i}`
                    li.innerHTML = `${i}`
                    pagel.appendChild(li)
                }
                const da = document.querySelectorAll('.page>li');
                da[0].className = 'lk'
                for (let i = 0; i < da.length; i++) {
                    da[i].addEventListener('click', function(e) {
                        $(e.target).attr('class', 'lk').siblings('li').attr('class', 'll')
                        getPage1(e.target.id, pageSize)
                            // getPer(e.target.id, pageSize)

                    })
                }



            }
            page();
        }

    })
}

getPer(1, 7);


//分页
function getPage1(page, pageSize) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson`,
        type: 'get',
        headers: {
            token
        },
        data: {
            page,
            pageSize
        },
        success: (res) => {
            console.log(res.data);




            const shownewcont = () => {
                const _content = document.querySelector('.card');
                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>人物名</th>
            
                <th>人物称号</th>
                <th>人物简介</th>
               
                <th>人物图</th>
               
                <th>操作</th>`
                res.data.forEach(item => {
                    const tr = document.createElement('tr')
                    tr.innerHTML = `<td>${item.id}</td>
                    <td>${item.uname}</td>
                 
                    <td>${item.title}</td>
                    <td  class='biao'>${item.introduce}</td>
                    <td><img class='hear' src='http://192.168.3.184:7001/${item.portrait}' /></td>
             
                    <td>
                    <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                    <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
 
                    </td>`
                    _content.appendChild(tr)
                })

            }
            shownewcont();
            const showContena = () => {
                //每次清空

                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>标题</th>
            
                <th>序号</th>
               
                <th>操作</th>`
                res.data.forEach((item, index) => {
                    //遍历计算方法，当前为第1页，一页2个，以此类推
                    // console.log(item, index);

                    // if (index >= (cur - 1) * size && index < cur * size) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `<td>${item.id}</td>
                        <td>${item.title}</td>
                     
                        <td>${item.nshow}</td>
                      
                        <td>
                        <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                        <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                       
                        </td>`
                    _content.appendChild(tr)
                        // }
                })
            }

            // showContena()
        }
    })
}
//删除
//删除
function perDe(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson/${id}`,
        type: 'delete',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            window.location.reload();
        }
    })

}


// const man = document.querySelector('#man');
// console.log(man);
const load = document.getElementById('oooo')
console.log(load);

//上传图片
load.addEventListener('change', function() {

    const fd = new FormData();

    // console.log(load.files[0]);
    fd.append('img', load.files[0]);
    // let yet = fd.get('wall');
    // console.log(yet);
    shangchuan(fd)

})

//上传图片接口获取地址
function shangchuan(formdata) {
    console.log(formdata);
    $.ajax({
        url: `http://192.168.3.184:7001/images`,
        type: 'post',
        headers: {
            token
        },
        contentType: false,
        processData: false,
        data: formdata,
        success: (res) => {
            console.log(1);
            console.log(res);
            localStorage.setItem('myimg', res.paths);

            // window.location.reload();
        }

    })
}

//返回
const ing = document.querySelector('.return');
ing.addEventListener('click', function() {
    // window.location.href = '后台漫画详情列表.html'
    history.go(-1);
})



const imgCon = document.getElementById('imgCon');
const imgs = document.getElementById('img');
console.log(imgs);
imgCon.style.display = 'none';
let imgUrll = '';
load.onchange = function(e) {
    const fileList = e.target.files;
    console.log(fileList);
    console.log(fileList[0]);
    if (fileList.length) {
        console.log(222);

        imgCon.style.display = 'block';
        imgUrl = window.URL.createObjectURL(fileList[0]);
        console.log(imgUrl);
        imgs.src = imgUrl;


    }
}



//增加
function addzhang(renwu, chenghao, jiehsao, ss) {
    console.log(123123)
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson`,
        type: 'post',
        headers: {
            token
        },

        data: {
            uname: renwu,
            title: chenghao,
            introduce: jiehsao,
            portrait: ss
        },
        success: (res) => {
            console.log(res)
            console.log(res.row.portrait);
            localStorage.setItem('myimg', res.row.portrait)

            // window.location.reload();
        }

    })
}

//删除
function deleper(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson/${id}`,
        type: 'delete',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            window.location.reload();
        }
    })

}



//添加按钮
const add = document.querySelector('.add_')
    //文本框内容
const txt = document.querySelector('.search-txt');
//点击搜素
const a = document.querySelector('.search-btn');
//文本框
const ki = document.querySelectorAll('.ki');
//确认按钮
const su = document.querySelector('#su');
console.log(su);
//取消
const cl = document.querySelector('#cl');
//添加模态框按钮
const o = document.querySelector('.o');
//获取表格



//获取详情信息
function pertail(id) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson/${id}`,
        type: 'get',
        headers: {
            token
        },
        success: (res) => {
            console.log(res);
            const ki = document.querySelectorAll('.ki');

            const renwu = ki[0];
            const chenghao = ki[1];
            const jiehsao = ki[2];
            const xiezhen = ki[3];
            console.log(renwu);
            renwu.value = res.data.uname;
            chenghao.value = res.data.title;
            jiehsao.value = res.data.introduce;
            // xiezhen.value = res.data.portrait

            console.log(imgs);
            imgs.txt = `http://192.168.3.184:7001/${res.data.portrait}`
                // xuhao.value = res.data.nshow;
            imgs.src = imgs.txt;
            imgCon.style.display = 'block'
        }
    })
}

//修改
function gaiper(id, uname, title, introduce, portrait) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson/${id}`,
        type: 'put',
        headers: {
            token
        },
        data: {
            id,
            uname,
            title,
            introduce,
            portrait
        },
        success: (res) => {
            console.log(res);
            window.location.reload();
        }
    })
}
var isper = 0;
const card = document.querySelector('.card');
card.addEventListener('click', function(e) {
    if (e.target.name === 'g') {
        const kal = e.target.dataset.id;
        isper = kal;
        // deleper(isper);
        pertail(isper)
        o.style.display = 'block'

    }
    //判断删除按钮
    if (e.target.name === 'delete') {
        const flag = confirm('是否删除?')
        if (flag == true) {
            console.log('你点了确认');
            deleper(e.target.id)
        } else(
            console.log('你点了取消')
        )
    }
})





add.addEventListener('click', function() {
    o.style.display = 'block';
    isper = 0;
})
su.addEventListener('click', function() {
    //获取各个文本框内容
    const renwu = ki[0].value;
    const chenghao = ki[1].value;
    const jiehsao = ki[2].value;
    // const xiezhen = ki[3].value;
    // console.log(xiezhen);
    if (isper === 0) {
        const ss = localStorage.getItem('myimg')
        console.log(ss);
        // addzhang(fd)
        addzhang(renwu, chenghao, jiehsao, ss)
        imgs.src = ''
        console.log(imgs);
        console.log(renwu, chenghao, jiehsao, ss);
        o.style.display = 'none';

    } else {
        const ss = localStorage.getItem('myimg')
            // console.log(isper, renwu, chenghao, jiehsao, xiezhen);
        gaiper(isper, renwu, chenghao, jiehsao, ss)
        o.style.display = 'none'
    }

})
cl.addEventListener('click', function() {
    o.style.display = 'none';
})


a.addEventListener('click', function() {
    ser(txt.value)

})

//搜索
function ser(uname) {
    $.ajax({
        url: `http://192.168.3.184:7001/cartoonperson`,
        type: 'get',
        headers: {
            token
        },
        data: {
            uname
        },
        success: (res) => {
            console.log(res);
            const shownewcont = () => {
                const _content = document.querySelector('.card');
                _content.innerHTML = '';
                _content.innerHTML = `<th>ID</th>
                <th>人物名</th>
            
                <th>人物称号</th>
                <th>人物简介</th>
               
                <th>人物图</th>
               
                <th>操作</th>`
                res.data.forEach(item => {
                    const tr = document.createElement('tr')
                    tr.innerHTML = `<td>${item.id}</td>
                    <td>${item.uname}</td>
                 
                    <td>${item.title}</td>
                    <td  class='biao'>${item.introduce}</td>
                    <td><img class='hear' src='http://192.168.3.184:7001/${item.portrait}' /></td>
             
                    <td>
                    <img src='.\\imges\\de.png' class="btn" name="delete" id='${item.id}' />
                    <img src='.\\imges\\edi.png' class="btn up" name="g" data-id='${item.id}' />
                  
                    </td>`
                    _content.appendChild(tr)
                })

            }
            shownewcont();
        }
    })
}